<template>
  <div  v-loading="loadingFull">
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="2"
        :labelWidth="110"
        formType="add"
        :isSubmitBtn="false"
      />
    </div>
    <!-- 角色属性 -->
    <!-- <div v-if="!isShow" class="dutyWrap"> -->
    <div class="dutyWrap">
      <h3 class='duty '>角色属性</h3>
      <div  class="padL10 " >
          <p style="float: left;margin-right: 35px;">销售</p>
          <el-checkbox-group v-model="checkedList1" :disabled="this.showFun == 'show'?true:false"  @change="handleCheckedChange" >
            <el-checkbox v-for="role in sites" :label="role.codeId" :key="role.codeId+'C'" :value="role.codeId">{{role.codeCnDesc}}</el-checkbox>
          </el-checkbox-group>
      </div>
      <div  class="padL10 ">
          <p style="float: left;margin-right: 35px;">售后</p>
          <el-checkbox-group v-model="checkedList2" :disabled="this.showFun == 'show'?true:false" @change="handleCheckedChange2">
            <el-checkbox v-for="role in sites2" :label="role.codeId" :key="role.codeId+'C'" :value="role.codeId">{{role.codeCnDesc}}</el-checkbox>
          </el-checkbox-group>
      </div>
    </div>
    <!-- <div v-else class="dutyWrap">
      <h3 class='duty '>角色属性</h3>
      <div  class="padL10 " >
          <el-checkbox-group v-model="checkedListAll"  @change="handleCheckedChange" >
            <el-checkbox v-for="role in sitesList" :label="role.codeId" :key="role.codeId+'C'" :value="role.codeId">{{role.codeCnDesc}}</el-checkbox>
          </el-checkbox-group>
      </div>
    </div> -->
    
    <el-row style="display:flex;flex-direction: column">
        <el-row style="height: 495px">
          <el-col style="height: 450px;width: 33%;">
            <div class='menu-header'>菜单权限</div>
            <el-scrollbar style="height: 450px;border: 1px solid rgba(144,147,153,.5);">
              <el-col style="padding: 5px 3px;">
                <el-tree ref="tree" style="margin-top: 12px;" 
                v-loading="loading" 
                show-checkbox 
                :data="jsonTree"
                node-key="id" 
                highlight-current 
                @node-click="nodeClickHandle" 
                :expand-on-click-node="false" />
              </el-col>
            </el-scrollbar>
          </el-col>
          <el-col style="height: 450px;width: 33%;">
            <div class='menu-header'>客户信息操作权限 </div>
            <el-scrollbar style="height: 450px;border: 1px solid rgba(144,147,153,.5);border-left: none;border-right: none;">
              <el-col style="padding: 5px 3px;">
                <div>
                  <div v-loading="rangeloading">
                    <div><label>操作权限</label></div>
                    <el-checkbox-group v-model="roleMenuRange" @change="handleRoleMenuRangeChange">
                      <div style="margin:0px 0px 0px 20px;width:20px;">
                        <el-checkbox v-for="menuRange in objRange" :label="menuRange.menuRangeId" :key="menuRange.menuRangeId"
                          :value="menuRange.menuRangeId">{{menuRange.codeCnDesc}}</el-checkbox>
                      </div>
                    </el-checkbox-group>
                    <!-- <el-radio-group v-model="roleMenuRange" @change="handleRoleMenuRangeChange">
                      <div style="margin:0px 0px 0px 20px;width:20px;">
                        <el-radio v-for="menuRange in objRange" 
                        :label="menuRange.menuRangeId" 
                        :key="menuRange.menuRangeId"
                        :value="menuRange.menuRangeId">{{menuRange.codeCnDesc}}
                        </el-radio>
                      </div>
                    </el-radio-group> -->
                  </div>
                  <br />
                  <div v-loading="actionloading">
                    <div><label>操作按钮</label></div>
                    <el-checkbox-group v-model="roleMenuAction"  @change="handleRoleMenuActionChange">
                      <div style="margin:0px 0px 0px 20px;width:20px;">
                        <el-checkbox v-for="menuAction in objAction" :label="menuAction.menuCuringId" :key="menuAction.menuCuringId"
                          :value="menuAction.menuCuringId">{{menuAction.actionName}}</el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-col>
            </el-scrollbar>
          </el-col>
          <el-col  style="height: 450px;width: 33%;">
            <div class='menu-header'>个人参数配置</div>
            <el-scrollbar  style="height: 450px;border: 1px solid rgba(144,147,153,.5);">
              <el-col  style="padding: 5px 3px;">
                <div v-show="!isShow">
                  <div>
                    <Todo ref="Todo"></Todo>
                  </div>
                  <div>
                    <part ref="part"></part>
                  </div>
                  <!-- <div>
                    <storageVec ref="storageVec"></storageVec>
                  </div>
                  <div>
                    <storagePart ref="storagePart"></storagePart>
                  </div>
                  <div>
                    <storageJpck ref="storageJpck"></storageJpck>
                  </div> -->
                  <!-- <div>
                    <favorableModels ref="favorableModels"></favorableModels>
                  </div> -->
                </div>
              </el-col>
            </el-scrollbar>
          </el-col>
        </el-row>
        <el-row style="text-align: center;margin-bottom: 15px;">

          <el-button @click='closeDialog()'>返 回</el-button>
          <el-button type="primary" @click="reqAuth" v-show="this.showFun == 'show'?false:true">确 定</el-button>
        </el-row>
      </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getMenu,roleData,getRoleMenuRange,getRoleMenuAction,setRoleAuth,findTcCodeByType,getMaintain } from '@/api/common/auth/roleManage';
import * as types from '@/api/common/auth/roleManage/types';
import { getJsonTree } from '@/utils/index';
import Todo from '@/pages/common/auth/roleManage/components/TodoList/Todo.vue'
import part from '@/pages/common/auth/roleManage/components/TodoList/part.vue'
import storageVec from '@/pages/common/auth/roleManage/components/TodoList/storageVec.vue'
import storagePart from '@/pages/common/auth/roleManage/components/TodoList/storagePart.vue'
import storageJpck from '@/pages/common/auth/roleManage/components/TodoList/storageJpck.vue'
import favorableModels from '@/pages/common/auth/roleManage/components/TodoList/favorableModels.vue'
import _ from 'lodash';
export default {
  name: 'Assignpermissions',
  mixins: [dictionary],
  components: {
    Todo,
    part,
    storageVec,
    storagePart,
    storageJpck,
    favorableModels
  },
  props: [
    "roleId",
    "roleCode",
    "roleName",
    "rowData",
    "isShow",
    "showFun",
    "isValid",
  ],
  // props: {
  //   roleId: {
  //     type: String,
  //     default: ''
  //   },
  //   roleName:{

  //   },
  //   rowData: {
  //     type: Object,
  //     default: () => ({})
  //   }
  // },
  data() {
    this.saveData = null;
    this.checkListRoleMenuRange = [];
    this.checkListRoleMenuAction = [];
    return {
      // formList: this.createFormList()
      formList: this.createFormList(),
      loadingFull:false,
      loading: false,
      rangeloading: false,
      actionloading: false,
      tree: [],
      menuId: '',
      objRange: [],
      roleMenuAction: [],
      roleMenuRange:[],
      objAction: [],
      checkedList1:[],
      checkedList2:[],
      sites:[],
      sites2:[],
      sitesList:[{codeCnDesc: "大区经理",codeId: 10061011}],
      checkedListAll:[10061011],
      isRoleMenuRange:false,
    }
  },
  computed: {
    ...mapState('app', ['btnLoading']),
    jsonTree() {
      this.tree.forEach(el => (el.label = el.text));
      this.tree.forEach(el => (el.parentId = el.parent));
      return getJsonTree(this.tree);
    }
    // addBtnState() {
    //   return this.btnLoading[types.YAN_ROLE_ADD];
    // }
  },
  created() {
    this.searchTree();
    this.init()
    // console.log(this.showFun,"showFun")
  },
  methods: {
    async init(){
      //多选职责--售前
     await findTcCodeByType(1006)
      .then(res => {
        this.sites = _.cloneDeep(res.data)
        // console.log(this.sites,"this.sites")
      })
      //多选职责--售后
     await findTcCodeByType(1007)
      .then(res => {
        this.sites2 = _.cloneDeep(res.data)
      })
      // console.log(this.rowData,"this.rowData")
      if(this.rowData.positionCode){
        let checkList = this.rowData.positionCode.split(",")
        checkList.forEach(x=>{
          if(x.slice(0,4) == 1006){
          this.checkedList1.push(Number(x))
          }else{
            this.checkedList2.push(Number(x))
          }
        })
      }
      console.log(this.isValid,"this.isValid")
      this.formList[0].initialValue=this.roleCode
      this.formList[1].initialValue=this.roleName
      this.formList[2].initialValue=this.isValid
      //判断是否是厂端
      if(this.isShow){
        this.formList[2].hidden=true
      }else{
        console.log(this.rowData,"this.rowData",this.formList[2])
        this.formList[2].initialValue=this.rowData.dataSource
        this.formList[2].hidden=false
        // 判断是否是查看
        if(this.showFun == 'show'){
            this.formList[1].disabled=true
            this.formList[2].disabled=true
        }else{
          this.formList[1].disabled=false
          this.formList[2].disabled=false
        }
        
      }
    },

    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '经销商角色代码',
          fieldName: 'roleCode',
          placeholder: '请输入...',
          style: { width: '200px' },
          disabled:true,
          rules: [{ required: true, message: '请输入角色代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '经销商角色名称',
          fieldName: 'roleName',
          placeholder: '请输入...',
          style: { width: '200px' },
          disabled:false,
          rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '是否关键岗位',
          fieldName: 'isValid',
          placeholder: '请输入...',
          style: { width: '200px' },
          itemList: this.createDictList('1004'),
          rules: [{ required: true,  trigger: 'blur',message: '请选择..'  }]
        }
      ]
    },
    //加载树
    async searchTree() {
      console.log(this.roleId,"roleId123")
      this.loading = true;
      let param = {
        roleId: this.roleId
      }
      const res = await getMenu(param);
      console.log(res,"roleData")
      const resRole = await roleData(this.roleId)
      let restreejson = resRole.data.treejson
      let resRoleCheckbo = resRole.data.checkbox
      //默认勾选下载中心
      console.log(res.data.treejson)
      let downeTree = restreejson.find(x=>x.id==103035);
      if(!downeTree){
        downeTree = restreejson.find(x=>x.id==103036);
      }
      downeTree.state.checked = true;
      /**
        * 勾选菜单
        */
      let selectedmenu = []
      for (let j = 0; j < restreejson.length; j++) {
        let states = restreejson[j].state
        if (states.checked == true) {
          selectedmenu.push(restreejson[j].id)
        }
      }
      this.$refs['tree'].setCheckedKeys(selectedmenu)
      // 操作权限操作按钮
      this.checkListRoleMenuRange = resRole.data.treeMenuRange
      this.checkListRoleMenuAction = resRole.data.treeMenuAction
      //配件仓库参数匹配
      if (resRoleCheckbo.accessoriesWarehouse != null) {
        this.checkedPartList = resRoleCheckbo.accessoriesWarehouse.split(',')
        this.$refs.storagePart.checkedPartList = resRoleCheckbo.accessoriesWarehouse.split(
          ','
        )

        if (this.$refs.storagePart.checkedPartList.length == this.$refs.storagePart.sitesPart.length && this.$refs
          .storagePart.sitesPart.length != 0) {
          this.$refs.storagePart.checkAllPart = true
        } else if (this.$refs.storagePart.checkedPartList.length == 0) {
          this.$refs.storagePart.checkAllPart = false
        } else {
          this.$refs.storagePart.isIndeterminatePart = true
        }
      }
      //维修参数匹配
      if (resRoleCheckbo.maintain != null) {
        this.checkedListRepairRepair = resRoleCheckbo.maintain.split(',')
        this.$refs.Todo.checkedListRepairRepair = resRoleCheckbo.maintain
          .split(',')
          .map(Number)
        if (this.$refs.Todo.checkedListRepairRepair.length == this.$refs.Todo.sitesRepairRepair.length && this.$refs.Todo
          .sitesRepairRepair.length != 0) {
          this.$refs.Todo.checkAllRepair = true
        } else if (this.$refs.Todo.checkedListRepairRepair.length == 0) {
          this.$refs.Todo.checkAllRepair = false
        } else {
          this.$refs.Todo.isIndeterminateRepair = true
        }
      }
      //配件参数匹配
      if (resRoleCheckbo.accessories != null) {
        this.checkedPartPartList = resRoleCheckbo.accessories.split(',')
        this.$refs.part.checkedPartPartList = resRoleCheckbo.accessories
          .split(',')
          .map(Number)
        if (this.$refs.part.checkedPartPartList.length == this.$refs.part.sitesPartPart.length && this.$refs.part
          .sitesPartPart.length != 0) {
          this.$refs.part.checkAllPartss = true
        } else if (this.$refs.part.checkedPartPartList.length == 0) {
          this.$refs.part.checkAllPartss = false
        } else {
          this.$refs.part.isIndeterminatePartss = true
        }
      }
      //仓库参数匹配
      if (resRoleCheckbo.vehicleWarehouse != null) {
        this.checkedListVec = resRoleCheckbo.vehicleWarehouse.split(',')
        this.$refs.storageVec.checkedListVec = resRoleCheckbo.vehicleWarehouse.split(
          ','
        )
        if (this.$refs.storageVec.checkedListVec.length == this.$refs.storageVec.sitesVec.length && this.$refs.storageVec
          .sitesVec.length != 0) {
          this.$refs.storageVec.checkAllVec = true
        } else if (this.$refs.storageVec.checkedListVec.length == 0) {
          this.$refs.storageVec.checkAllVec = false
        } else {
          this.$refs.storageVec.isIndeterminateVec = true
        }
      }
      if (resRoleCheckbo.suppliesWarehouse != null) {
        this.checkedJpckList = resRoleCheckbo.suppliesWarehouse.split(',')
        this.$refs.storageJpck.checkedJpckList = resRoleCheckbo.suppliesWarehouse.split(
          ','
        )
        if (this.$refs.storageJpck.checkedJpckList.length == this.$refs.storageJpck.sitesJpck.length && this.$refs
          .storageJpck.sitesJpck.length != 0) {
          this.$refs.storageJpck.checkAllJpck = true
        } else if (this.$refs.storageJpck.checkedJpckList.length == 0) {
          this.$refs.storageJpck.checkAllJpck = false
        } else {
          this.$refs.storageJpck.isIndeterminateJpck = true
        }
      }
      //优惠模式参数匹配
      if (resRoleCheckbo.favorableModels != null) {
        this.checkedDiscountModeList = resRoleCheckbo.favorableModels.split(',')
        this.$refs.favorableModels.checkedDiscountModeList = resRoleCheckbo.favorableModels.split(
          ','
        )
        if (this.$refs.favorableModels.checkedDiscountModeList.length == this.$refs.favorableModels.sitesDiscountMode
          .length && this.$refs.favorableModels.sitesDiscountMode.length != 0) {
          this.$refs.favorableModels.checkAllDiscountMode = true
        } else if (this.$refs.favorableModels.checkedDiscountModeList.length == 0) {
          this.$refs.favorableModels.checkAllDiscountMode = false
        } else {
          this.$refs.favorableModels.isIndeterminateDiscountMode = true
        }
      }

      this.deleteRes(res.data.treejson);
      this.tree = res.data.treejson;

      

      this.loading = false;
    },
    // 删除无效数据(无父节点)
    deleteRes(res) {
      let result = [];
      for (let i = 0; i < res.length && res[i].id != null; i++) {
        let pid = res[i].parent;
        let oid = res[i].id;
        result[oid] = pid;
      }
      for (let j = 0; j < res.length; j++) {
        // 一级父节点跳过
        if (res[j].parent == "#") continue;
        if (res[j] && result[res[j].parent] == null) {
          let index = j;
          j = 0;
          delete result[res[index].id];
          res.splice(index, 1);
        }
      }
    },
    //树点击
    nodeClickHandle(data) {
      console.log(this.jsonTree,"this.jsonTree")
      let {
        id,
        parent,
        text
      } = data
      this.text = text
      this.searchMenuHandle(id)
    },
    //显示客户信息操作权限
    async searchMenuHandle(id) {
      this.rangeloading = true
      this.actionloading = true
      this.menuId=id;
      const getRoleMenuRangeRes = await getRoleMenuRange(id,this.roleId)
      this.objRange = _.cloneDeep(getRoleMenuRangeRes.data)
      console.log(this.objRange,"objRange")
      this.roleMenuRange=[];
      if(this.checkListRoleMenuRange!=null){
        /* for(let i=0;i<this.checkListRoleMenuRange.length;i++){
          console.log(this.checkListRoleMenuRange[i].split("-")[0],"权限配置单选1")
          if(id===this.checkListRoleMenuRange[i].split("-")[0]){
            console.log(this.checkListRoleMenuRange[i].split("-")[1],"权限配置单选2")
            this.roleMenuRange=Number(this.checkListRoleMenuRange[i].split("-")[1]);
          }
        } */
        for(let i=0;i<this.checkListRoleMenuRange.length;i++){
          if(id===this.checkListRoleMenuRange[i].split("-")[0]){
            let rangArray=this.checkListRoleMenuRange[i].split("-")[1].split(",");
            for(let j=0;j<rangArray.length;j++){
              this.roleMenuRange.push(Number(rangArray[j]));
            }
            // return;
          }
        }
      }
      const getRoleMenuActionRes = await getRoleMenuAction(id, this.roleId)
      this.objAction = _.cloneDeep(getRoleMenuActionRes.data)
      this.roleMenuAction=[];
      if(this.checkListRoleMenuAction!=null){
        for(let i=0;i<this.checkListRoleMenuAction.length;i++){
          if(id===this.checkListRoleMenuAction[i].split("-")[0]){
            let actionArray=this.checkListRoleMenuAction[i].split("-")[1].split(",");
            for(let j=0;j<actionArray.length;j++){
              this.roleMenuAction.push(Number(actionArray[j]));
            }
            // return;
          }
        }
      }
      this.rangeloading = false
      this.actionloading = false
    },
    //操作权限改变事件
    handleRoleMenuRangeChange(value){
      console.log(value,"123")
       /* this.checkListRoleMenuRange=[]
        this.checkListRoleMenuRange.push(this.menuId+"-"+value); */
      console.log(this.checkListRoleMenuRange,"this.checkListRoleMenuRange")
      if(this.checkListRoleMenuRange!=null && this.checkListRoleMenuRange.length>0){
        let ok=true;
        for(let i=0;i<this.checkListRoleMenuRange.length;i++){
          if(this.menuId===this.checkListRoleMenuRange[i].split("-")[0]){
            if(value.length==0){
              this.checkListRoleMenuRange.splice(i,1);
            }else{
              this.checkListRoleMenuRange[i]=this.menuId+"-"+value.join(",");
            }
            if(value.length > 1){
              this.$message({
                type: "info",
                message: "请单选!"
              });
            }
            // if(value.length== 1){
            //   this.checkListRoleMenuRange[i]=this.menuId+"-"+value.join(",");
            // }else{
            //   this.checkListRoleMenuRange.splice(i,1);
            //   this.checkListRoleMenuRange=[]
            //   this.$message({
            //     type: "info",
            //     message: "请单选!"
            //   });
            // }
            ok=false;
            return;
          }
        }
        if(ok){
          this.checkListRoleMenuRange.push(this.menuId+"-"+value.join(","));
        }
      }else{
        this.checkListRoleMenuRange=[];
        this.checkListRoleMenuRange.push(this.menuId+"-"+value.join(","));
      }
      console.log(this.checkListRoleMenuRange,"this.checkListRoleMenuRange")
    },
    //操作按钮改变事件
    handleRoleMenuActionChange(value){
      
      if(this.checkListRoleMenuAction!=null && this.checkListRoleMenuAction.length>0){
        let ok=true;
        for(let i=0;i<this.checkListRoleMenuAction.length;i++){
          if(this.menuId===this.checkListRoleMenuAction[i].split("-")[0]){
            if(value.length==0){
              this.checkListRoleMenuAction.splice(i,1);
            }else{
              this.checkListRoleMenuAction[i]=this.menuId+"-"+value.join(",");
            }
            ok=false;
            return;
          }
        }
        if(ok){
          this.checkListRoleMenuAction.push(this.menuId+"-"+value.join(","));
        }
      }else{
        this.checkListRoleMenuAction=[];
        this.checkListRoleMenuAction.push(this.menuId+"-"+value.join(","));
      }
      
    },
    //职责选中事件1
     handleCheckedChange(value){
      this.checkedList1=this.checkedList1.concat(value)
      this.checkedList1=_.uniq(this.checkedList1)
      console.log(this.checkedList1,"this.checkedList1")
    },
    //职责选中事件2
     handleCheckedChange2(value){
       this.checkedList2=this.checkedList2.concat(value)
       this.checkedList2=_.uniq(this.checkedList2)
       console.log(this.checkedList2,"this.checkedList2")
    },
    //分配权限保存
    async reqAuth() {
      if(this.checkListRoleMenuRange instanceof Array && this.checkListRoleMenuRange.length > 0){
        this.checkListRoleMenuRange.forEach(x=>{
            if(x.indexOf(",") > 0){
              this.isRoleMenuRange =false
            }else{
              this.isRoleMenuRange =true
            }
        })
      }else{
        this.isRoleMenuRange =true
      }
      
      if(this.isRoleMenuRange){
        this.loadingFull=true
        let selectedHalfNode = this.$refs['tree'].getCheckedKeys() //父节点
        let selectedNode = this.$refs['tree'].getHalfCheckedKeys() //子节点
        let allNode = selectedHalfNode.concat(selectedNode)
        if (allNode == '') {
          this.$message({
            type: "info",
            message: "请至少分配一条权限!"
          });
          this.loadingFull=false
        } else {
          //去掉一级菜单
          for (var k = 0; k < allNode.length; k++) {
            var nodekv = allNode[k]
            if (nodekv.length == 2) {
              allNode.splice(k, 1)
            }
          }
          console.log(this.checkListRoleMenuRange,this.checkListRoleMenuAction,"checkListRoleMenuAction")
          let params = {
            checkedList1:this.checkedList1,
            checkedList2:this.checkedList2,
            checkedListAll:[],
            roleId: this.roleId,
            roleName:this.formList[1].initialValue,
            nowTree: allNode.join(','),
            treeMenuRange: this.checkListRoleMenuRange.join(';'),
            treeMenuAction: this.checkListRoleMenuAction.join(';'),
            nowRole: this.roleId,
            // maintain: this.$refs.Todo.getData(),
            // accessories: this.$refs.part.getData(),
            // vehicleWarehouse: this.$refs.storageVec.getData(),
            // accessoriesWarehouse: this.$refs.storagePart.getData(),
            // suppliesWarehouse: this.$refs.storageJpck.getData(),
            // favorableModels: this.$refs.favorableModels.getData(),
            // dataSource:this.formList[2].initialValue,
            isValid:this.formList[2].initialValue
          }
          console.log(params.isValid,"是否")
          if(params.isValid == "是"){
            params.isValid = 10041001
          }else if(params.isValid == "否"){
            params.isValid = 10041002
          }else{
            params.isValid=this.formList[2].initialValue
          }
          this.$refs['tree'].setCheckedKeys(selectedHalfNode)
          const setRoleAuthRes = await setRoleAuth(this.formList[0].initialValue, params)
          if(setRoleAuthRes.resultCode === 200) {
            this.$notify.success({title: '提示信息',message:'保存成功!'});
            this.closeDialog('refresh');
            this.checkedList1=[]
            this.checkedList2=[]
          }else {
            this.$notify.error({title: '提示信息',message:setRoleAuthRes.errMsg||'保存失败!'});
            this.closeDialog()
            console.log(123)
          }
        }
      }else{
        this.$message({
          type: "info",
          message: "客户信息中的操作权限请单选!"
        });
     }
    },
    //返回
    closeDialog(type) {
      this.$emit('close', false, type);
      this.loadingFull=false
    }
  }
};
</script>

<style lang="less" scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }

  .el-checkbox {
    margin-right: 25px;
  }
  .dutyWrap{
    overflow: hidden;
    min-height: 200px;
  }
  .duty{
    width: 99%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    background: #eee;
    text-indent: 5px;
  }
  .menu-header {
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    background: #eee;
    text-indent: 5px;
  }

  .app-container .el-dialog__body {
    padding: 0 20px;
  }
  .padL10{
    padding-left: 30px;
    // height: 50px;
    line-height: 50px;
  }
  .postH3{
    cursor: pointer;
  }
</style>
